<template>
  <div class="page-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="已使用" name="1">
        <Used v-if="activeName === '1'" />
      </el-tab-pane>
      <el-tab-pane label="未使用" name="2">
        <UnusedList v-if="activeName === '2'" />
      </el-tab-pane>
      <el-tab-pane label="已过期" name="3">
        <ExpiredList v-if="activeName === '3'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Used from './UsedList.vue'
import UnusedList from './UnusedList.vue'
import ExpiredList from './ExpiredList.vue'

export default {
  name: 'CouponRecord',
  components: {
    Used,
    UnusedList,
    ExpiredList
  },
  data() {
    return {
      activeName: '1'
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped></style>
